<!DOCTYPE html>
<html>
<head>
  <title>HTML table tests</title>
  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script type="application/javascript"
          src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <script type="application/javascript"
          src="../common.js"></script>
  <script type="application/javascript"
          src="../role.js"></script>

  <script type="application/javascript">
    function doTest()
    {
      //////////////////////////////////////////////////////////////////////////
      // tables having captions

      // Two captions, first is used, second is ignored.
      var accTree =
        { TABLE: [
          { CAPTION: [
            {
              role: ROLE_TEXT_LEAF,
              name: "caption"
             }
          ] },
          { ROW: [
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] },
            { COLUMNHEADER: [ { TEXT_LEAF: [ ] } ] }
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] }
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] }
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] }
          ] }
        ] };

      testAccessibleTree("table", accTree);

      // One caption, empty text, caption is ignored.
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] }
          ] }
        ] };

      testAccessibleTree("table_caption_empty", accTree);

      // Two captions, first has empty text, both are ignored.
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] }
          ] }
        ] };

      testAccessibleTree("table_caption_firstempty", accTree);

      // One caption, placed in the end of table. In use.
      accTree =
        { TABLE: [
          { CAPTION: [
            {
              role: ROLE_TEXT_LEAF,
              name: "caption"
             }
          ] },
          { ROW: [
            { CELL: [ { TEXT_LEAF: [ ] } ] },
            { CELL: [ { TEXT_LEAF: [ ] } ] }
          ] }
        ] };

      testAccessibleTree("table_caption_intheend", accTree);

      //////////////////////////////////////////////////////////////////////////
      // table2 (consist of one column)

      accTree = {
        role: ROLE_TABLE,
        children: [
          {
            role: ROLE_ROW,
            children: [
              {
                role: ROLE_COLUMNHEADER
              }
            ]
          },
          {
            role: ROLE_ROW,
            children: [
              {
                role: ROLE_CELL
              }
            ]
          }
        ]
      };

      testAccessibleTree("table2", accTree);

      //////////////////////////////////////////////////////////////////////////
      // table3 (consist of one row)

      accTree = {
        role: ROLE_TABLE,
        children: [
          {
            role: ROLE_ROW,
            children: [
              {
                role: ROLE_ROWHEADER
              },
              {
                role: ROLE_CELL
              }
            ]
          }
        ]
      };

      testAccessibleTree("table3", accTree);

      /////////////////////////////////////////////////////////////////////////
      // table4 (display: table-row)
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] }
            ] }
          ] } ]
        };
      testAccessibleTree("table4", accTree);

      /////////////////////////////////////////////////////////////////////////
      // table5 (intermediate accessible for tbody)
      accTree =
        { TABLE: [
          { TEXT_CONTAINER: [
            { ROW: [
              { CELL: [
                { TEXT_LEAF: [ ] }
              ] }
            ] }
          ] } ]
        };
      testAccessibleTree("table5", accTree);

      /////////////////////////////////////////////////////////////////////////
      // log table
      accTree =
        { TABLE: [
          { ROW: [
            { CELL: [
              { TEXT_LEAF: [ ] }
            ] }
          ] }
        ] };
      testAccessibleTree("logtable", accTree);

      SimpleTest.finish();
    }

    SimpleTest.waitForExplicitFinish();
    addA11yLoadEvent(doTest);
  </script>
</head>
<body>

  <a target="_blank"
     title="When a table has only one column per row and that column happens to be a column header its role is exposed wrong"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=529621">
    Mozilla Bug 529621
  </a>
  <a target="_blank"
     title="when div has display style table-row"
     href="https://bugzilla.mozilla.org/show_bug.cgi?id=727722">
    Mozilla Bug 727722
  </a>
  <p id="display"></p>
  <div id="content" style="display: none"></div>
  <pre id="test">
  </pre>

  <table id="table">
    <thead>
      <tr>
        <th>col1</th><th>col2</th>
      </tr>
    </thead>
    <caption>caption</caption>
    <tbody>
      <tr>
        <td>cell1</td><td>cell2</td>
      </tr>
    </tbody>
    <tr>
      <td>cell3</td><td>cell4</td>
    </tr>
    <caption>caption2</caption>
    <tfoot>
      <tr>
        <td>cell5</td><td>cell6</td>
      </tr>
    </tfoot>
  </table>

  <table id="table_caption_empty">
    <caption></caption>
    <tr>
      <td>cell1</td><td>cell2</td>
    </tr>
  </table>

  <table id="table_caption_firstempty">
    <caption></caption>
    <tr>
      <td>cell1</td><td>cell2</td>
    </tr>
    <caption>caption</caption>
  </table>

  <table id="table_caption_intheend">
    <tr>
      <td>cell1</td><td>cell2</td>
    </tr>
    <caption>caption</caption>
  </table>

  <table id="table2">
    <thead>
      <tr>
        <th>colheader</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>bla</td>
      </tr>
    </tbody>
  </table>

  <table id="table3">
    <tr>
      <th>rowheader</th>
      <td>cell</td>
    </tr>
  </table>

  <table id="table4">
    <div style="display: table-row">
      <td>cell1</td>
    </div>
  </table>

  <table id="table5">
    <tbody style="display:block;overflow:auto;">
      <tr>
        <td>bla</td>
      </tr>
    </tbody>
  </table>

  <table id="logtable" role="log"><tr><td>blah</td></tr></table>
</body>
</html>
